<template>
	<view>
		<!-- 地图组件 -->
		<map id="myMap" :latitude="latitude" :longitude="longitude" :markers="markers" :show-location="true"
			@regionchange="handleRegionChange" style="width: 100%; height: 100%;" />

		<!-- 定位按钮 -->
		<view class="imgLocationContainer">
			<image src="../../static/tabbar/dingwei.png" @click="moveToLocation" class="imgLocation"></image>
		</view>

		<view>
			<!--新建标点按钮-->
			<view class="imgAddContainer" v-if="!isSelecting">
				<image src="../../static/tabbar/添加.png" mode="" v-if="!isSelecting" @click="startSelecting"
					class="imgAdd"></image>
			</view>

			<!-- 确认标点按钮 -->
			<view v-if="isSelecting" class="imgConfirmContainer">
				<image src="../../static/tabbar/确认.png" mode="" v-if="isSelecting" @click="confirmPoint"
					class="imaConfirm"></image>
			</view>

			<view v-if="isSelecting" class="imgAddContainer">
				<!--取消标点按钮-->
				<image src="../../static/tabbar/错误提示.png" mode="" v-if="isSelecting" @click="endSelecting"
					class="imgAdd"></image>
			</view>
		</view>


		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search-box">
				<!-- 输入框 -->
				<input class="search-input" type="text" placeholder="请输入地址或地名" v-model="searchQuery"
					@input="onSearchInput" />
				<!-- 清除按钮 -->
				<view v-if="searchQuery" class="clear-btn" @click="clearSearchQuery">
					&#x2715; <!-- 叉号图标 -->
				</view>
			</view>
			<!-- 搜索结果 -->
			<view class="search-results" v-if="searchResults.length">
				<view v-for="(result, index) in searchResults" :key="index" class="search-item"
					@click="selectSearchResult(result)">
					{{ result.title }}
				</view>
			</view>
		</view>

		<!-- 中心标点 -->
		<image v-if="isSelecting" src="../../static/tabbar/point.png" class="center-marker" />


	</view>
</template>

<script setup>
	import {
		getToken
	} from '@/utils/auth'; // 引入获取 Token 的方法

	export default {
		data() {
			return {
				latitude: 23.099994, // 初始纬度
				longitude: 113.32452, // 初始经度
				markers: [], // 地图标点数组
				isSelecting: false, // 是否进入选点模式
				selectedPoint: null, // 选中的点
				mapCtx: null, // 地图上下文
				comment: "", // 批注内容
				searchQuery: '', // 搜索框输入
				searchResults: [], // 搜索结果
			};
		},
		onReady() {
			// 初始化地图上下文
			this.mapCtx = uni.createMapContext('myMap');
			this.moveToLocation();
		},
		methods: {
			// 移动到当前位置
			moveToLocation() {
				this.mapCtx.moveToLocation();
			},

			// 开始新建标点
			startSelecting() {
				this.isSelecting = true;
			},

			// 取消选点
			endSelecting() {
				this.isSelecting = false;
			},

			// 地图中心点位置变化时触发
			handleRegionChange(e) {
				if (this.isSelecting && e.type === 'end') {
					this.mapCtx.getCenterLocation({
						success: (res) => {
							this.selectedPoint = {
								latitude: res.latitude,
								longitude: res.longitude
							};
						}
					});
				}
			},

			// 确认标点
			confirmPoint() {
				if (!this.selectedPoint) {
					uni.showToast({
						title: '请先移动地图到标点位置！',
						icon: 'none'
					});
					return;
				}

				// 弹出输入框，让用户填写批注内容
				uni.showModal({
					title: '添加批注',
					editable: true, // 允许用户输入
					placeholderText: '请输入批注内容',
					success: (res) => {
						if (res.confirm) {
							this.comment = res.content; // 获取用户输入的批注
							this.savePoint(); // 保存标点数据
						}
					}
				});
			},

			// 保存标点数据并提交到后端
			savePoint() {

				// 获取 Token
				const token = getToken();
				console.log("token是" + token);
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				console.log("token" + token)
				const markerData = {
					latitude: this.selectedPoint.latitude,
					longitude: this.selectedPoint.longitude,
					comment: this.comment,
					openid: token
				};



				// 添加标点到地图
				this.markers.push({
					id: this.markers.length + 1,
					latitude: markerData.latitude,
					longitude: markerData.longitude,
					openid: token,
					iconPath: '../../static/tabbar/摩托.png',
					width: 35,
					height: 35
				});
				// 提交数据到后端
				uni.request({
					url: 'http://127.0.0.1:8083/dazhuwx/markersinfo/addMarkersInfo', // 替换为后端接口地址
					method: 'POST',
					data: markerData,
					header: {
						Authorization: `Bearer ${token}`, // 在请求头中附加 Token
						UserType: 'xcx'
					},
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({
								title: '标点已保存',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '保存失败，请重试',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误，请稍后再试',
							icon: 'none'
						});
					}
				});

				// 退出选点模式
				this.isSelecting = false;

			},

			// 搜索输入时触发
			onSearchInput() {
				if (!this.searchQuery.trim()) {
					this.searchResults = [];
					return;
				}

				// 调用腾讯位置服务API搜索
				uni.request({
					url: `https://apis.map.qq.com/ws/place/v1/suggestion`,
					method: 'GET',
					data: {
						keyword: this.searchQuery,
						region: '成都', // 可替换为动态获取的城市
						key: '5LWBZ-5NICZ-KGUXF-ZG3I4-FJAXO-OOBUE' // 替换为你的腾讯地图API密钥
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data && res.data.data) {
							this.searchResults = res.data.data;
						} else {
							this.searchResults = [];
							uni.showToast({
								title: '未找到相关地点',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '搜索失败，请检查网络',
							icon: 'none'
						});
					}
				});
			},

			// 点击搜索结果
			selectSearchResult(result) {
				this.searchResults = []; // 清空搜索结果
				this.latitude = result.location.lat; // 更新地图中心点
				this.longitude = result.location.lng;

				// 移动到指定位置
				this.mapCtx.moveToLocation({
					latitude: result.location.lat,
					longitude: result.location.lng
				});
			},

			// 地图区域改变时触发，监听拖动
			onMapRegionChange(e) {
				// 只在地图发生区域改变时清空搜索结果
				if (e.type === 'end') {
					this.searchQuery = '';
					this.searchResults = [];
				}
			},

			// 清空搜索框内容
			clearSearchQuery() {
				this.searchQuery = '';
				this.searchResults = [];
			},
		},
	};
</script>


<style lang="scss">
	/* 地图全屏 */
	#myMap {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	/* 定位按钮容器 */
	.imgLocationContainer {
		position: absolute;
		bottom: 20%;
		right: 20px;
		width: 40px;
		height: 40px;
		background-color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		z-index: 10;

		/* 定位按钮 */
		.imgLocation {
			width: 30px;
			height: 30px;
		}
	}



	.imgAddContainer {
		position: absolute;
		bottom: 13%;
		right: 20px;
		width: 40px;
		height: 40px;
		background-color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		z-index: 10;

		.imgAdd {
			width: 30px;
			height: 30px;
		}
	}


	.imgConfirmContainer {
		position: absolute;
		bottom: 6%;
		right: 20px;
		width: 40px;
		height: 40px;
		background-color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		z-index: 10;

		.imaConfirm {
			width: 30px;
			height: 30px;
		}
	}


	/* 新建标点按钮 */
	.new-point-btn {
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translateX(-50%);
		background-color: #007bff;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		text-align: center;
		z-index: 10;
	}

	/*取消标点模式*/
	.cancel-point-btn {
		position: absolute;
		bottom: 20%;
		left: 50%;
		transform: translateX(-50%);
		background-color: #007bff;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		text-align: center;
		z-index: 10;
	}

	/* 中心标点样式 */
	.center-marker {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 30px;
		height: 30px;
		transform: translate(-50%, -50%);
		z-index: 10;
	}

	/* 确认标点按钮 */
	.confirm-point-btn {
		position: absolute;
		bottom: 10%;
		right: 20px;
		background-color: #28a745;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		text-align: center;
		z-index: 10;
	}


	/* 搜索框容器 */
	.search-container {
		position: absolute;
		top: 10px;
		left: 15px;
		right: 15px;
		z-index: 100;
	}

	/* 搜索框外层，包含输入框和清除按钮 */
	.search-box {
		display: flex;
		align-items: center;
		background-color: white;
		padding: 10px;
		border-radius: 30px;
		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* 输入框样式 */
	.search-input {
		flex: 1;
		padding: 8px;
		border: none;
		outline: none;
		background-color: transparent;
		font-size: 14px;
		color: #333;
	}

	/* 清除按钮 */
	.clear-btn {
		font-size: 18px;
		color: #ccc;
		cursor: pointer;
		margin-left: 8px;
	}

	/* 搜索结果样式 */
	.search-results {
		margin-top: 10px;
		max-height: 250px;
		overflow-y: auto;
		background-color: rgba(255, 255, 255, 0.9);
		/* 半透明背景 */
		box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		padding: 10px;
	}

	/* 每个搜索结果项 */
	.search-item {
		padding: 12px;
		border-bottom: 1px solid #f0f0f0;
		cursor: pointer;
		font-size: 14px;
		color: #333;
	}

	/* 悬浮效果 */
	.search-item:hover {
		background-color: #f5f5f5;
	}

	/* 搜索框聚焦状态样式 */
	.search-input:focus {
		border: none;
		outline: none;
	}
</style>